/*
 * @Description: 新增表格部分
 * @Version: V1.0.0
 * @Autor: CHY
 * @Date: 2022-04-02 14:00:59
 * @LastEditors: CHY
 * @LastEditTime: 2022-04-09 16:31:07
 */
import React, { useState, useEffect } from 'react';
import { Button, Table, Modal, message } from 'antd';
import PubSub from 'pubsub-js';
import AddOrderInfo from './addorderInfo';
import '../../../modal.css'
import './index.css'

const AddTable = () => {
    const [data, setdata] = useState([])
    const [sendFlage, setSendFlage] = useState(true)
    const [isModalVisible, setIsModalVisible] = useState(false);
    function clickHeadle(e, a) {
        console.log(e, a);
        showModal()
    }

    const orderDataSource = [
        {
            key: '1',
            orderCate: '订单配送',
            clientName: '全为',
            clientPerson: '未填写',
            headleState: '2022-03-30 ',
            staringTime: '2022-03-30 14:13',
            endTime: '2022-03-30 14:13',
            transportation: '飞机',
            businessTraveller: 'gaoying	',
            workSpecification: '超级管理员',
            dispatchName: '公园1号',
        }
    ];

    const orderColumns = [
        {
            title: '工单类型',
            dataIndex: 'orderCate',
            key: 'orderCate',
            render: () => {
                return (<><Button onClick={(e, key) => clickHeadle(e, 'orderCate')} key='orderCate' type="link" block>未处理 </Button></>)
            }
        },
        {
            title: '客户名称',
            dataIndex: 'clientName',
            key: 'clientName',
        },
        {
            title: '客户联系人',
            dataIndex: 'clientPerson',
            key: 'clientPerson',
        },
        {
            title: '处理状态',
            dataIndex: 'headleState',
            key: 'headleState',

        },
        {
            title: '起始时间',
            dataIndex: 'staringTime',
            key: 'staringTime',
        },
        {
            title: '结束时间',
            dataIndex: 'endTime',
            key: 'endTime',
        },
        {
            title: '交通方式',
            dataIndex: 'transportation',
            key: 'transportation',
        },
        {
            title: '差旅联系人',
            dataIndex: 'businessTraveller',
            key: 'businessTraveller',
        },
        {
            title: '工作描述',
            dataIndex: 'workSpecification',
            key: 'workSpecification',
        },
        {
            title: '指派人员',
            dataIndex: 'dispatchName',
            key: 'dispatchName',
        }
    ];


    let arr = null
    const showModal = (record) => {
        // console.log("record", record);
        setdata(record)

        setIsModalVisible(true);

    };
    //职位信息弹窗
    const info = (str) => {
        message.error(str);
    };
    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    const saveHeadle = () => {

        if (arr === null || arr === undefined || arr.text === undefined) {
            info('工作描述和差旅联系人不能为空！')
            return
        }
        handleCancel()
        setSendFlage(false)
        console.log(arr.clientName);
        console.log(arr.text);
    }
    useEffect(() => {
        PubSub.publish('clientInfo', { data, handleCancel })
        PubSub.subscribe('formDataAll', (_, data2) => {
            arr = data2
            console.log('formDataAll', data2);
        })
        return () => {
        };
    }, [data])
    /*￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥页面内容 ￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥￥*/
    return (
        <>
            <Table dataSource={orderDataSource} columns={orderColumns} bordered pagination={false} onRow={record => {
                return {
                    onClick: event => { showModal(record) }, // 点击行
                };
            }} />
            <Modal title="新增工单【第二步：录入工单信息】" visible={isModalVisible} onCancel={handleCancel} className='newAddOrder-box selectTable' footer={[
                <Button key="back" onClick={saveHeadle} className='btn-bgc-13'>保存</Button>,
                <Button key="self" onClick={handleCancel} className='btn-bgc-12'> 返回</Button>,
                <Button key="ok" type="primary" onClick={handleOk} className='btn-bgc-3 '>自定义设置</Button>]}

            >
                {/* // {新增工单信息} */}
                <AddOrderInfo send={sendFlage} />
            </Modal>
        </>
    );
}
export default AddTable;
